<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://" + request.getServerName()+":"+request.getServerPort()+path+"/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>buy</title>
    <%--引入jQuery--%>
    <script src="<%=basePath%>/js/jquery-3.7.1.min.js"></script>
    <!--网页图标-->
    <link rel="shortcut icon" href="<%=basePath%>/img/cat.png" type="image/x-icon">
    <link rel="stylesheet" href="<%=basePath%>/css/buy.css">
</head>
<body>
    <div class="main">
        <%--使用jsp指令将top1页面引入buy页面--%>
        <%@ include file="top1.jsp"%>
        <div class="content">
            <div class="catImg">
                <img style="width: 100%" src="<%=basePath%>/img/${requestScope.cat.catImg}">
            </div>
            <div class="catInfo">
                <div class="info">
                    <span style="font-size: 25px;font-weight: 400">${requestScope.cat.catName}</span>
                    <span style="font-size: 20px">${requestScope.cat.engName}</span>
                    <span style="font-size: 20px">￥${requestScope.cat.price}</span>
                    <span>${requestScope.cat.intro}</span>
                </div>
                <!--点击button，选购宠物-->
                <div class="buyButton">
                    <%--隐藏标签input--%>
                    <input class="catId" type="hidden" value="${requestScope.cat.id}">
                    预约店铺
                </div>
            </div>
        </div>
    </div>
<script>
    // 点击预约店铺跳转到宠物店列表
    $(".buyButton").click(function (){
        // 匿名函数：快速创建和使用
        // 传递品种猫id，便于取出不同品种猫的价格
        var id=$(".catId").val();
        window.open("<%=basePath%>/shop?method=getShop&id="+id);
    })
</script>
</body>
</html>
